//进行axios的二次封装：使用请求与响应拦截器
import useUserStore from '@/store/modules/user'
import axios from 'axios'
import { ElMessage } from 'element-plus'


//第一步：利用axios对象的create方法，去创建axios实例（其他的配置：基础路径、超时的时间）
const request = axios.create({
    baseURL: import.meta.env.VITE_APP_BASE_API,
    // timeout: 5000
    timeout: 30000
})
//第二步：请求拦截器，请求拦截器主要作用是用于数据的处理，可以在请求头中携带token等信息，也可以在请求的参数中携带一些信息
request.interceptors.request.use((config) => {
    //config:配置对象，里面有一个headers请求头对象，用于携带token等信息
    const userStore = useUserStore();
    config.headers.token = userStore.token
    return config
}, (error) => {
    return Promise.reject(error)
})
//第三步：响应拦截器，响应拦截器主要是用于数据的处理，可以在响应的数据中携带一些信息，也可以在响应的状态码中携带一些信息
request.interceptors.response.use((res) => {
    return res.data
}, (error) => {
    //响应失败的回调函数，可以在这里进行统一的错误处理
    let message = ''
    let status = error.response.status
    switch (status) {
        case 401:
            message = 'token过期'
            break;
        case 403:
            message = '无权访问'
            break;
        case 404:
            message = '请求地址不存在'
            break;
        case 500:
            message = '服务器出错'
            break;
        default:
            message = '网络出错'
    }
    ElMessage.error(message || '请求失败')
    return Promise.reject(error)
})
//第四步：对外暴露
export default request
